<template>
  <div class="container">
    <div class="img_box">
      <img src="../assets/img/u982.png" alt="">
    </div>
    <h1>上海地铁工务公司</h1>
    <div class="box_container">
      <!--<v-touch v-touch:tap="turnToPage('activity')">-->
      <div class="box box1" @click="turnToPage('activity')">
        <h3>党建活动</h3>
        <p>点击查看所有党建活动</p>
      </div>
      <!--</v-touch>-->
      <div class="box box2" @click="turnToPage('information')">
        <h3>党建资讯</h3>
        <p>点击查看所有资讯动态</p>
      </div>
      <div class="box box3"  @click="turnToPage('study')">
        <h3>党建学习</h3>
        <p>点击查看所有学习内容</p>
      </div>
      <div class="box box4"  @click="turnToPage('notice')">
        <h3>通知公告</h3>
        <p>点击查看所有通知公告</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
    data(){
      return {

      }
    },
    methods:{
        turnToPage(param){
            this.$router.push({
                name:param,
                query:{
                    pageType:param
                }
            })
        }
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container {
    background: url('../assets/img/u5.jpg') no-repeat ;
    background-size: 100% 100%;
    height: 100vh;
    width: 100%;
    overflow-y:scroll ;

  }


  h1 {
    width: 100%;
    text-align: center;
    font-size: 0.64rem;
    font-family: JXinSuTi, 迷你简新舒体;
    color: #FFFF99;
    font-weight: 400;
    margin-top: 0.6rem;



  }

  .img_box{
    padding-top: 1.58rem;

  }
  .img_box img {
    width: 1.98rem;
    height: 2.37rem;
    display: block;
    margin: 0 auto;
    /*margin: 1.1rem auto 0  auto;*/

  }

  .box {
    width: 3.26rem;
    height: 2.45rem;
    border-radius: 8px;
  }

  .box1 {
    background: #fff url('../assets/img/u965.png') no-repeat  0.36rem 0.2rem;
    background-size:0.89rem 0.97rem ;
  }
  .box2{
    background: #fff url('../assets/img/u968.png') no-repeat  0.32rem 0.34rem;
    background-size: 0.82rem 0.78rem;
  }
  .box3{
    background: #fff url('../assets/img/u973.png') no-repeat  0.36rem 0.42rem;
    background-size: 0.77rem 0.77rem;
  }
  .box4{
    background: #fff url('../assets/img/u978.png') no-repeat  0.36rem 0.4rem;
    background-size: 0.74rem 0.84rem;
  }


  .box_container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    justify-content: space-around;
    padding: 0 4%;
  }

  .box3, .box4 {
    margin-top: 0.3rem;
  }

  .box h3{
    font-weight: 500;
    font-size: 0.28rem;
    line-height: 1;
    margin-left: 0.4rem;
    margin-top: 1.5rem;
  }
  .box p{
    font-size: 0.2rem;
    font-weight: 200;
    color:#6B6B6B;
    margin-left: 0.4rem;
    margin-top: 0.12rem;
  }
</style>
